﻿/* -----------------------------
** AAM's Cascading Style Sheet **
------------------------------- */

/* BODY */
body        
{ 
    background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF)); 
    background-color: #CCCCCC; /* In case browser does not support CSS3 */
    margin: 0; 
    padding: 0; 
    font: 13px Segoe UI, Arial, Helvetica; 
    text-align: center; 
}

h1, h2, h3  { margin: 0; padding: 0; }
h4          { margin: 0; padding: 0 0 20px 0; color: #336699; }


/* SHARED COMMON ATTRIBUTES */
#wrapper, #header, #footer, .form, .login_form, .reg_form  
{
    /* Rounded Edges */
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
}

.form, .login_form, .reg_form
{
    /* Form Boxes' Drop Shadow */
    -moz-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888;
    margin: auto; border: 10px outset #76BC76;
}


/* WEB WRAPPER */
#wrapper  
{
    width: 1000px; 
    margin: 0 auto; 
    background-color:#E9E9E9;
    text-align: justify; 
    
    /* Shadow Without Offset Around Entire Web Wrapper */ 
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
}

/* SECTIONS */
#header     { background-color: #097EC2; color: #FFFFFF; }
#content    { background-color: #E9E9E9; color: #002B5F; }
#footer     { background-color: #097EC2; color: #FFFFFF; }


/* SECTION STYLES */
#header a   { color:#FFFFFF; }
#footer a   { color:#FFFFFF; }


/* CONTENT COLUMNS */
#leftcol    { background-color:#E9E9E9; width: 22%; float: left;  }
#rightcol   { background-color:#F0F0F0; width: 78%; float: right; }
#onecol     { background-color:#F0F0F0; width: 100%; float: left; }


/* FORMS */
.form       { padding: 15px; width: 550px; }
.login_form { padding: 25px; width: 500px; }
.reg_form   { padding: 15px; width: 420px; }
.form_name  { background: #E6E6E6; padding: 4px 8px; font-family: Segoe UI Light; font-size: 22px }


/* BUTTON COLOURS */
.clrBlue, .buttonLogin, .buttonConfirmChanges, .buttonAdd, .buttonAddResident, .buttonAddVolunteer, .buttonAddItem, .buttonAddList, .buttonSearch, .buttonEdit
{ 
    background-color: #097EC2; color: White; border: 2px Solid; border-color: White; height: 25px 
}
.clrGray, .buttonCancelChanges, .buttonDeleteAccount, .buttonDeleteItem, .buttonRemove, .buttonCancel, .buttonBack
{ 
    background-color: #A19C81; color: White; border: 2px Solid; border-color: White; height: 25px 
}
.clrGreen, .buttonLogout
{ 
    background-color: #76BC76; color: White; border: 2px Solid; border-color: White; height: 25px 
}
.clrOrange, .buttonSignUp, .buttonRegister, .buttonShowAll, .buttonConfirm
{ 
    background-color: #F3812B; color: White; border: 2px Solid; border-color: White; height: 25px 
}


/* SPECIFIC BUTTONS */
.clrBlue, .buttonLogin          { width: 55px;  }
.clrBlue, .buttonConfirmChanges { width: 125px; }
.clrBlue, .buttonAdd            { width: 50px;  }
.clrBlue, .buttonAddResident    { width: 100px; }
.clrBlue, .buttonAddVolunteer   { width: 100px; }
.clrBlue, .buttonAddItem        { width: 80px;  }
.clrBlue, .buttonAddList        { width: 135px; }
.clrBlue, .buttonSearch         { width: 65px;  }
.clrBlue, .buttonEdit           { width: 62px;  }

.clrGray, .buttonCancelChanges  { width: 120px; }
.clrGray, .buttonDeleteAccount  { width: 125px; }
.clrGray, .buttonDeleteItem     { width: 90px;  }
.clrGray, .buttonRemove         { width: 65px;  }
.clrGray, .buttonCancel         { width: 65px;  }
.clrGray, .buttonBack           { width: 62px;  }

.clrGreen, .buttonLogout        { width: 60px;  }

.clrOrange, .buttonSignUp       { width: 70px;  }
.clrOrange, .buttonRegister     { width: 75px;  }
.clrOrange, .buttonShowAll      { width: 70px;  }
.clrOrange, .buttonConfirm      { width: 62px;  }


/* BUTTON HOVERS */
.buttonLogin:hover, .buttonConfirmChanges:hover, .buttonAdd:hover, .buttonAddResident:hover, .buttonAddVolunteer:hover, .buttonAddItem:hover, .buttonAddList:hover, .buttonSearch:hover, .buttonEdit:hover
{
    background-color: #2B9DE0; 
}
.buttonCancelChanges:hover, .buttonDeleteAccount:hover, .buttonDeleteItem:hover, .buttonRemove:hover, .buttonCancel:hover, .buttonBack:hover
{ 
    background-color: #B2AD8F; 
}
.buttonLogout:hover
{ 
    background-color: #8FD18F; 
}
.buttonSignUp:hover, .buttonRegister:hover, .buttonShowAll:hover, .buttonConfirm:hover
{ 
    background-color: #F69A54; 
}


/* HYPERLINKS */
a, a:link, a:visited, a:hover, a:active { text-decoration: none; color: #376B9A; }


/* FOOTER QUICK LINKS BULLETING */
.listArrow 
{ 
	background-image: url('../Images/ListArrow.PNG'); 
	padding-top: 2px; 
	padding-bottom: 2px; 
	background-position: 25px; 
	background-repeat: no-repeat; 
	padding-left: 14px;
}


/* OTHERS */
p           { margin: 0; padding: 0 0 10px 0; }
ul          { margin: 0; padding: 1px 10px 8px 30px;}
img         { border: none; }
.clr        { clear: both; }
.content    { padding: 10px; line-height: 1.8; text-align: left; }
.nav        { background-color: #034A74; font-weight: bold; padding: 10px 10px 10px 10px; }